import { ReactComponent as Close } from '@/assets/images/shared/CloseTag.svg';
import cn from 'classnames';

import cs from './Tag.module.scss';

export const Tag = ({
  onClick,
  tag,
  withCross,
  className,
  isSelected,
  variant = 'primary',
}: {
  tag: string;
  onClick: (args: string) => void;
  withCross?: boolean;
  className?: string;
  isSelected?: boolean;
  variant?: 'primary' | 'secondary';
}) => (
  <button
    className={cn(cs.tag, isSelected && cs.selected, withCross && cs.cross, cs?.[variant], className)}
    onClick={() => onClick(tag)}
    type="button"
  >
    <div className={cs.text}>{tag}</div>
    {withCross && (
      <div className={cs.icon_container}>
        <div className={cs.icon}>
          <Close />
        </div>
      </div>
    )}
  </button>
);
